var NotesList = React.createClass({
    render: function () {
        // this.props.children 的值有三种可能: 没有子节点 undefined, 有一个子节点 object, 有多个子节点 array
        console.log(this.props.children);
        // React.Children.map 可以处理 this.props.children 三种类型的值
        var child = React.Children.map(this.props.children, function (child) {
            return <li>{child}</li>;
        });

        var childCount = React.Children.count(this.props.children);
        console.log('childCount =>', childCount);

        // 只能是一个对象, 不能是多个对象(数组), 也不能没有
        var onlyChild = React.Children.only(this.props.children);
        console.log('onlyChild =>', onlyChild);

        var toArray = React.Children.toArray(this.props.children);
        console.log('toArray =>', toArray);

        return (
            <ol>
                { child }
            </ol>
        );
    }
});
ReactDOM.render(
    <NotesList>
        <span>hello</span>
    </NotesList>,
    document.querySelector('#container1')
);

/**
 * React.Children.map(object children, function fn [, object thisArg])
 * 返回 null undefined 或 数组(根据 this.props.children)
 * 用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object
 */
var m = React.Children.map(undefined, function (i) {
    console.log(i);
    return i + 1;
});
console.log('m =>', m);

/**
 * React.Children.forEach(object children, function fn [, object thisArg])
 * 类似于 React.Children.map()，但是不返回对象
 */
React.Children.forEach([1, 2, 3], function (i) {
    console.log(i);
});


/**
 * React.Children.count(object children)
 * 返回 children 当中的组件总数
 */
// React.Children.count(this.props.children);

/**
 * React.Children.only(object children)
 * 返回 children 中 仅有的子级。否则抛出异常。
 * 这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）。
 */


/**
 * React.Children.toArray(object children)
 */
